<template>
  <div>
    <myheader></myheader>

    <section class="featured-block text-center">
      <div class="container">

        <div>
          <Breadcrumb :datas="datas"></Breadcrumb>
        </div>

        <div>
          <table>
            <tr>
              <td>用户名</td>
              <td><input type="text" v-model="username" placeholder="请输入用户名"></td>
            </tr>
            <tr>
              <td>手机号</td>
              <td><input type="text" v-model="phone" placeholder="请输入手机号"></td>
            </tr>
            <tr>
              <td>密码</td>
              <td><input type="text" v-model="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
            <tr>
              <td>验证码</td>
              <td><input type="text" v-model="code" placeholder="请输入验证码"></td>
            </tr>
            <tr>
              <td>验证码图片</td>
              <td><img class="imgcode" alt="点击刷新" id="mycode" :src="src" @click="changeimg"></td>
            </tr>
            <tr>
              <td>滑块验证</td>
              <td><drag-verify :width="width" :height="height" :text="text" ref="Verify"></drag-verify></td>
            </tr>
            <tr>
              <td></td>
              <td>
                <Button @click="login" color="blue">登录</Button>
                <Button @click="set" color="blue">重置</Button>
                &emsp;&emsp;
                <img @click="sina" class="imgcode" src="http://localhost:8000/static/sina.png" alt="">
                &emsp;&emsp;
                <img @click="ding" class="imgcode" src="http://localhost:8000/static/dingding.png" alt="">
              </td>
            </tr>
          </table>
        </div>

      </div>
    </section>

    <mytail></mytail>
  </div>
</template>

<script>
    //导入组件
  import myheader from './myheader'
  import mytail from './mytail'

    //滑动验证码
    import dragVerify from 'vue-drag-verify';

    export default {
        name: "login",
      data:function () {
        return{
          //面包屑导航变量
          datas:[{title:'首页', route: {name:'index'}}, {title:'登录页'}],
          username: '',
          phone:'',
          password:'',
          code:'',
          src:'http://127.0.0.1:8000/code/',

          //声明滑块验证码相关数据
          width:320,
          height:42,
          text:'请将滑块拖动到右边',
        }
      },

      //注册组件标签
      components:{
          'myheader': myheader,
          'mytail': mytail,
          'dragVerify': dragVerify,
      },

      methods:{
          //钉钉三方登录
          ding:function(){
            //拼接url
            let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoavtrejmdlyxnnyhvi&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8000/dingding/';

            //跳转
            window.location.href = url;

          },

          //新浪三方登录
          sina:function(){
            //拼接url
            let url = 'https://api.weibo.com/oauth2/authorize?client_id=3035970630&redirect_uri=http://127.0.0.1:8000/md_admin/weibo';

            //跳转
            window.location.href = url;

          },


          // 刷新验证码 局部刷新
          changeimg:function(){
            //随机字符串
            var num = Math.ceil(Math.random()*10);
            // 赋值地址
            this.src = this.src + '?code=' + num
          },

          login:function () {
            //  滑块判断是否拖动
            if(this.$refs.Verify.isPassing===false){
              this.$Message('请拖动滑动验证');
              return false
            }else {
              this.$Message('验证成功')
            }

            this.axios({
              url:'http://127.0.0.1:8000/login/',
              method:'get',
              params:{username:this.username,phone:this.phone, password:this.password, code:this.code},
            }).then(res=>{
              if(res.data.code===200){
                this.$Message(res.data.message);
                localStorage.setItem('uid', res.data.uid);
                localStorage.setItem('username', res.data.username);
                localStorage.setItem("jwt",res.data.jwt);
                this.$router.push('/');
              }else {
                this.$Notice(res.data.message);

                // 刷新验证码
                var num = Math.ceil(Math.random()*10);
                this.src = this.src + '?code=' + num
              }
            })
          },

          set:function () {
            this.username='';
            this.password='';
          },



      }
    }
</script>

<style scoped>
td{
  padding: 10px;
}
.imgcode{
  cursor: pointer;
}
</style>
